<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //   function test1() {
      //     this.x = 1;
      //   }
      //   var obj = new test1();
      //   obj.x; // 1
      //   console.log(obj);
      //   构造函数的this会在new的时候发生变化
      function fn() {
        this.user = "xxx";
        return [].length;
      }
      var a = new fn();
      console.log(a.user);
      function getType(obj) {
        let type = typeof obj;
        if (type !== "object") {
          // typeof
          return type;
        }
        // typeof object
        return Object.prototype.toString
          .call(obj)
          .replace(/^\[object (\S+)\]$/, "$1");
      }
      console.log(getType([].map));
      //   -----------------------------
      //    箭头函数的this指向上下文，有上下文中的this决定
      const obj = {
        sayThis: () => {
          console.log(this);
        },
      };
      obj.sayThis(); // window JavaScript sayThis
      const globalSay = obj.sayThis;
      function name(params) {
        const aa = () => {
          var a = 666;
          console.log(this, this.a);
        };
        aa();
      }
      name();
      //   ---------------------------
      //   箭头函数不能被new，因为本身没有this，而new关键字需要函数有一个this指向他的实例对象
      const Cat = (name) => {
        console.log(this);
        this.name = name;
      };
      //   Cat.prototype.sayName = function () {
      //     console.log(this === window); //true
      //     return this.name;
      //   };
      //   const cat = new Cat("mm");
      console.dir(Cat);
      console.dir(name);
      //-------------------------------------------
      console.log('---------------------------------------------');
    //   setTimeout(() => {
    //     console.log(this);
    //   }, 2000);
    //   setTimeout(function () {
    //     console.log(this);
    //   }, 6000);
      // 使用匿名函数
      function MyClass() {
        this.value = "Hello";

        setTimeout(function () {
          console.log(this); // 在非严格模式下，这将是undefined或window对象（取决于浏览器和模式）
        }, 1000);
      }

      new MyClass();

      // 使用箭头函数
      function MyClassWithArrow() {
        this.value = "Hello";

        setTimeout(() => {
          console.log(this.value); // 正确输出 'Hello'，因为箭头函数捕获了MyClassWithArrow的this值
        }, 1000);
      }

      new MyClassWithArrow();
    </script>
  </body>
</html>
